<template>
    <div class="login">
        <el-form class="form" ref="form" :model="form" :rules="rules" @keyup.enter.native="submit">
            <h2 class="text-center" style="margin-bottom: 20px;">登录</h2>
            <el-form-item prop="account">
                <el-input size="lg" v-model="form.account" prefix-icon="el-icon-user"/>
            </el-form-item>
            <el-form-item prop="pwd">
                <el-input size="lg" v-model="form.pwd" prefix-icon="el-icon-lock"/>
            </el-form-item>
            <el-form-item>
                <el-button size="lg" type="primary" style="width: 100%;" :loading="loading" @click="submit">登录
                </el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    import {login} from "@/api";

    export default {
        data() {
            return {
                loading: false,
                form: {
                    account: '',
                    pwd: '',
                },
                rules: {
                    account: [
                        {required: true, message: '用户名不能为空', trigger: 'blur'}
                    ],
                    pwd: [
                        {required: true, message: '密码不能为空', trigger: 'blur'}
                    ],
                }
            }
        },
        methods: {
            submit() {
                this.$submit(this.$refs['form'], () => {
                    this.loading = true;
                    login(this.form, res => {
                        window.localStorage.setItem('ak', res.ak);
                        window.location = "./";
                    }, () => {
                        this.loading = false;
                    });
                });
            }
        }
    }
</script>
<style lang="scss">
    .login {
        padding-top: 150px;
        height: 100%;
        background-image: url("./login.jpg");
        background-repeat: no-repeat;
        background-size: cover;
        min-height: 570px;

        .form {
            margin: 0 auto;
            width: 400px;
            background-color: #ffffff;
            padding: 20px 40px;
            border-radius: 4px;
            box-shadow: 0 0 30px #ddd;
        }
    }
</style>
